<template>
  <div>
    <el-row type="flex" justify="end">
      <!-- 选择年 -->
      <el-select v-model="year" size="small" @change="changeDate">
        <el-option v-for="item in yearList" :key="item" :label="item" :value="item" />
      </el-select>
      <!-- 选择月 -->
      <el-select v-model="month" size="small" style="margin-left: 20px" @change="changeDate">
        <el-option v-for="item in 12" :key="item" :label="item" :value="item" />
      </el-select>
    </el-row>
    <!-- v-model关联的值是 日期对象 -->
    <el-calendar v-model="value">
      <template #dateCell="{date, data}">
        <!-- {{ date }}  是日期对象 -->
        <div class="date-content">
          <span class="text">{{ getDay(data.day) }}</span>
          <!-- <span v-if="isWeek(date)" class="rest">休</span> -->
          <span v-if="isWeek(data.day)" class="rest">休</span>
        </div>
      </template>
    </el-calendar>
  </div>
</template>

<script>
export default {
  props: {
    currentDate: {
      type: Date,
      // 基本数据类型写默认值 '' true 1 ,复杂数据类型 使用工厂函数返回
      default: () => new Date()
    }
  },
  data() {
    return {
      value: new Date(),
      month: '', // 选择月份关联的值
      year: '', // 选择年份关联的值
      // yearList: [2018, 2019, 2020, 2021, 2022, 2023, 2024] // 要求年份是 前五年 + 今年 + 后五年
      // 模拟的休息日列表, 应该发送请求回来
      restList: ['2022-01-01', '2022-01-02', '2022-01-03', '2022-01-18', '2022-01-20', '2022-01-20', '2022-01-26', '2022-01-27', '2022-01-28', '2022-01-29', '2022-01-30']
    }
  },
  computed: {
    // 使用计算属性的方式渲染年和月, 渲染期间是可以的,但是涉及到修改计算属性,
    /*  month: {
      get() {
        return this.currentDate.getMonth() + 1
      },
      set(value) {
        console.log(value)
        this.month = value
      }
    },
    year() {
      return this.currentDate.getFullYear()
    }, */
    yearList() {
      return Array.from(new Array(11), (item, index) => index + this.year - 5)
    }
    /* yearlist() {
      const arr = []
      // 前五
      for (let i = this.year; i <= this.year - 5; i--) {
        arr.push(i)
      }
      // 后五
      ....
      return arr
    } */
  },
  watch: {
    // 使用侦听器,侦听value的变化,打印得到一个日期对象, 从这个日期对象中获取到年份和月份赋值给year和month
    value(newval) {
      // console.log(newval)
      this.year = newval.getFullYear()
      this.month = newval.getMonth() + 1
    }
  },
  created() {
    this.month = this.currentDate.getMonth() + 1
    this.year = this.currentDate.getFullYear()
  },
  methods: {
    // 为两个下拉框绑定change事件, 可以取到最新的年和月
    // 基于最新的年和月 拼接一份新的日期对象赋值给value
    changeDate() {
      // console.log(this.year, this.month)
      this.value = new Date(`${this.year}-${this.month}-01`)
    },
    getDay(date) {
      const str = date.split('-')[2]
      return str.startsWith('0') ? str.slice(1) : str
    },
    // 周末休息
    /* isWeek(date) {
      console.log(date.getDay())
      return (date.getDay() === 0 || date.getDay() === 6)
    } */
    // 模拟排班表休息
    isWeek(date) {
      // console.log(date)
      return this.restList.includes(date)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-calendar {
 ::v-deep.el-calendar__header{
    display: none;
  }
}
::v-deep .el-calendar-day {
  height:  auto;
 }
::v-deep .el-calendar-table__row td::v-deep .el-calendar-table tr td:first-child, ::v-deep .el-calendar-table__row td.prev{
  border:none;
 }
.date-content {
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
}
.date-content .rest {
  color: #fff;
  border-radius: 50%;
  background: rgb(250, 124, 77);
  width: 20px;
  height: 20px;
  line-height: 20px;
  display: inline-block;
  font-size: 12px;
  margin-left: 10px;
}
.date-content .text{
  width: 20px;
  height: 20px;
  line-height: 20px;
 display: inline-block;

}
::v-deep .el-calendar-table td.is-selected .text{
   background: #409eff;
   color: #fff;
   border-radius: 50%;
 }
::v-deep .el-calendar__header {
   display: none
 }
</style>
